<template>
  <div class="m-nav">
    <div class="page-all clearfix">
      <ul class="fl">
        <li>
          <a href="#">首页</a>
        </li>
        <li>
          <a href="#">猫实惠</a>
        </li>
        <li>
          <a href="#">优惠</a>
        </li>
        <li>
          <a href="#">海淘气</a>
        </li>
        <li>
          <a href="#">原创</a>
        </li>
        <li>
          <a href="#">比友福利</a>
        </li>
        <li>
          <a href="#">一键海涛</a>
        </li>
        <li>
          <a href="#">爆料投稿</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="css">
.m-nav {
  /* position: relative; */
  margin-top: 60px;
  height: 40px;
  line-height: 40px;
  background-color: #f85e23;
}
.m-nav li {
  float: left;
  padding: 0 30px;
}
.m-nav a {
  color: #fff;
}
.m-nav .fl :nth-child(7)::after {
  content: "";
  display: inline-block;
  height: 19px;
  width: 33px;
  top: 10px;
  background: url(../../assets/images/new.png) no-repeat;
  animation: updown 0.2s ease-in-out 2.7s infinite alternate;
}
.m-nav .fl :nth-child(8)::after {
  content: "";
  display: inline-block;
  height: 19px;
  width: 33px;
  top: 10px;
  /* background-size: contain; */
  background: url(../../assets/images/reward.png) no-repeat;
  animation: updown 0.2s ease-in-out 2.7s infinite alternate;
}
/* 动画 */
@keyframes updown {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 3px);
  }
}
</style>